import React, { useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import p from './panel.module.scss'
import Welcome from '../../components/Welcome';
import { RefObject } from 'react';
import axios from 'axios';





function panel() {
    /* ---------------------------- 渲染每月文章发布量的echarts --------------------------- */
    const articleCountRef = useRef<HTMLDivElement>(null)    // 渲染位置的dom的ref对象
    const getMonthArticleCount = async () => {
        let data = await axios({
            method: 'get',
            url: 'http://localhost:8080/api/admin/getMonthArticleCount'
        })
        if (data.status === 200) {
            // 在初始化完成后才能拿到dom，所以要在useEffect中绘制
            const articleCountChart = echarts.init(articleCountRef.current);    // echarts对象
            const months = new Date().getMonth()
            let monthArr = []
            for (let i = 0; i <= months; i++) {
                monthArr.push(`${i + 1}月`)
            }
            console.log(monthArr, months);

            // 绘制
            articleCountChart.setOption({
                title: {
                    text: '全站每月文章发布量',
                    left: 'center'  // 标题的位置，默认为 'left'  
                },
                xAxis: {
                    type: 'category',
                    data: monthArr
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        name: '数量',
                        data: data.data.result,
                        type: 'bar'
                    }
                ]
            })
        }
    }
    useEffect(() => {
        getMonthArticleCount()
    }, [])

    /* -------------------------------- 绘制文章类型饼图 -------------------------------- */
    const typeRef = useRef<HTMLDivElement>(null)        // dom
    const getTypePercent = async () => {
        let data = await axios({
            method: 'get',
            url: 'http://localhost:8080/api/admin/getTypePercent'
        })
        if (data.status === 200) {
            const typeChart = echarts.init(typeRef.current)
            typeChart.setOption({
                title: {
                    text: '各文章类型所占百分比',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    top: 'center'
                },
                series: [
                    {
                        name: '文章类型',
                        type: 'pie',
                        radius: '50%',
                        data: data.data.typeResult,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        }
    }
    useEffect(() => {
        getTypePercent()
    }, [])

    /* -------------------------------- 全站最受欢迎作者 -------------------------------- */
    const [hotAuthorList, setHotAuthorList] = useState([])
    const getHotauthor = async () => {
        let data = await axios({
            method: 'get',
            url: 'http://localhost:8080/api/admin/getHotAuthor'
        })
        if (data.status === 200) {
            let list: any = []
            data.data.userResult = data.data.userResult.sort((a: any, b: any) => b.likeCount - a.likeCount)

            data.data.userResult.forEach((item: any, index: number) => {
                if (index < 5) {
                    list.push(item)
                }

            })
            setHotAuthorList(list)
        }
    }
    useEffect(() => {
        getHotauthor()
    }, [])

    /* -------------------------------- 全站最受欢迎文章 -------------------------------- */
    const [hotArticle, setHotArticle] = useState([])
    const getHotArticle = async () => {
        let data = await axios({
            method: 'get',
            url: 'http://localhost:8080/api/admin/getHotArticle'
        })
        if (data.status === 200) {
            let list: any = []
            data.data.data = data.data.data.sort((a: any, b: any) => (b.article_like + b.article_collect) - (a.article_like + a.article_collect))

            data.data.data.forEach((item: any, index: number) => {
                if (index < 5) {
                    list.push(item)
                }

            })
            setHotArticle(list)
        }
    }
    useEffect(() => {
        getHotArticle()
    }, [])

    return (
        <div className={p.page}>
            <div className={p.container}>
                <div className={p.welcome}>
                    <Welcome></Welcome>
                </div>
                <div className={p.main}>
                    <div className={p.top} ref={articleCountRef}>

                    </div>
                    <div className={p.bottom}>
                        <div className={p.bottomLeft} ref={typeRef}></div>
                        <div className={p.bottomRight}>
                            <div className={p.bottomRightTitle}>全站最受欢迎作者</div>
                            <div className={p.bottomRightContent}>
                                {
                                    hotAuthorList.map((item: any) => {
                                        return <div className={p.contentItem} key={item.user_id}>
                                            <div className={p.itemAvatar}><img src={item.user_avatar} alt="" /></div>
                                            <div className={p.itemName}>{item.user_name}</div>
                                            <div className={p.itemHot}><span>☀</span>{item.likeCount}</div>
                                        </div>
                                    })
                                }

                            </div>
                        </div>
                        <div className={p.bottomRight}>
                            <div className={p.bottomRightTitle}>全站最受欢迎文章</div>
                            <div className={p.bottomRightContent}>
                                {
                                    hotArticle.map((item: any) => {
                                        return <div className={p.contentItem} key={item.article_id}>
                                            <div className={p.itemAvatar}><img src={item.article_coverimg} alt="" /></div>
                                            <div className={p.itemName} style={{ fontSize: '12px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{item.article_title}</div>
                                            <div className={p.itemHot}><span>☀</span>{item.article_like + item.article_collect}</div>
                                        </div>
                                    })
                                }

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default panel;